<template>
	<view class="app">
		<view class="head">
			<image class="img" src="../../static/head.png"></image>
			移动商城
		</view>
		<swiper circular indicator-dots=true autoplay=true :interval=3000>
			<swiper-item v-for="m in productList">
				<image :src="m.productImg"></image>
			</swiper-item>
			
		</swiper>
		<scroll-view class="body">
			<uni-card class="table" v-for="p in productList" 
				  margin="5px" @click="queryDetail(p.id)">
				  <view><image :src="p.productImg" style="height: 200rpx;width: 200rpx;"></image></view>
				  <view style="font-size: 35rpx;">{{p.name}}</view>
				  <br>
				  <view style="font-size: 45rpx;color: red;">￥{{p.price}}</view>
			</uni-card>
		</scroll-view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList: [],


			}
		},
		methods: {
			queryGoods() {
				// #ifdef H5
				uni.request({
					url: 'api/product-server/queryGoods', //仅为示例，并非真实接口地址。
					method: "GET",
					success: (res) => {
						this.productList = res.data.data;
						
					}
				});
				// #endif
				
				// #ifdef MP-WEIXIN
				uni.request({
					// url: 'api/product-server/queryGoods', //仅为示例，并非真实接口地址。
					url:'http://localhost:8501/product-server/queryGoods',
					method: "GET",
					success: (res) => {
						this.productList = res.data.data;
					}
				});
				// #endif
				
				// axios.get('cc').then(res=>{
				// 	this.productList = res.data.data
				// })

			},
			queryDetail(id){
				uni.request({
					url:'api/custom-server/isLogin',
					success: (res) => {
						if(res.data.code == 500){
							uni.showToast({
							  title: '请先登录',
							  icon: 'error',
							  duration: 2000
							});
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}else if(res.data.code == 200){
							uni.navigateTo({
								url:"/pages/product/productDetail?id="+id
							})
						}
					}
				})
				
			}
		},
		created() {
			this.queryGoods();
		}
	}
</script>

<style>
	.app {
		position: relative;
	
	}

	.head {
		background-color: aliceblue;
		height: 40px;
		position: fixed;
		z-index: 1000;
		/* 确保 bar 在其他元素之上 */
		display: flex;
		width: 100%;
	}

	.body {
		background-color: antiquewhite;

	}

	.buttom {
		background-color: aqua;
		height: 60px;
	}

	.img {
		height: 30px;
		width: 120px;

	}

	.table {
		image-rendering: crisp-edges;
		height: 400rpx;
		width: 320rpx;
		float: left;
	}
</style>